<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test Keyboard Mixin with Tab key</title>
<style>
	.functionalTest .dgrid {
		height: 300px;
		width: 400px;
		margin: 20px;
	}
</style>
</head>
<body class="functionalTest">
<button id="showHeaderButton" tabindex="0">Show Header</button>
<div id="grid1"></div>
<div id="grid2"></div>

<script src="../../../../dojo/dojo.js" data-dojo-config="async: true"></script>
<script>
var ready;
require([
	"dojo/_base/declare", "dgrid/Grid", "dgrid/Keyboard", "dgrid/List", "dojo/on"
], function(declare, Grid, Keyboard, List, on){
	var i;
	var data;
	var button = document.getElementById("showHeaderButton");
	var KeyboardGrid = declare([Grid, Keyboard]);
	var grid1 = new KeyboardGrid({
		showHeader: true,
		columns: {
			id: "ID",
			value: "Value"
		}
	}, "grid1");
	data = [];
	for(i = 0; i < 10; i++){
		data.push({id: i, value: "Value " + i});
	}
	grid1.renderArray(data);

	var grid2 = new KeyboardGrid({
		showHeader: false,
		columns: {
			id: "ID",
			value: "Value"
		}
	}, "grid2");
	data = [];
	for(; i < 20; i++){
		data.push({id: i, value: "Value " + i});
	}
	grid2.renderArray(data);
	button.focus();

	on(button, "click", function(){
		grid2.set("showHeader", true);
		button.focus();
	});

	ready = true;
});
</script>

</body>
</html>
